iT邦幫忙

2025 iThome 鐵人賽

DAY 30
0
Modern Web

用 LINE OA 打造中小企業訂單系統:從零開始的 30 天實作紀錄系列 第 30

完賽回顧與未來展望:從 MVP 到商業化的下一步

  • 分享至 

  • xImage
  •  

恭喜你看到這裡!今天是鐵人賽的最後一天,我們要來回顧這 30 天的旅程,同時展望這個 LINE 訂單系統的未來可能性。


我們完成了什麼?

回顧第一天,我們從一個單純的想法出發:

「能不能讓中小企業不用架設複雜網站,就能在 LINE 上接單?」

30 天後的今天,我們真的做到了。讓我們用一張圖來總結整個系統:

系統功能總覽

功能模組 完成項目 涵蓋天數
基礎架構 LINE OA、Messaging API、Node.js + Express Day 1-7
訂單流程 Flex Message 選單、多步驟下單、MongoDB 寫入 Day 8-11
通知機制 管理者群組推播、顧客查詢、雙向通知 Day 12-14, 23-25
表單體驗 LIFF 訂單表單、Rich Menu 綁定 Day 15-16
後台管理 Admin Dashboard、JWT 驗證、CORS 處理 Day 17-20
效能優化 Redis 快取、佇列機制、錯誤處理 Day 21-22
商業功能 金流串接(綠界)、Webhook 整合、重試機制 Day 27-29
監控維運 Logging、健康檢查、DLQ 管理 Day 29

關鍵技術回顧

1️⃣ LINE 整合架構

我們學會了:

  • Messaging API Channel 處理 Bot 互動與通知
  • LINE Login Channel 掛載 LIFF 表單
  • Webhook 作為事件驅動核心
  • Reply API vs Push API 的應用時機
  • Flex Message 打造美觀的商品選單

核心價值:讓顧客在最熟悉的平台完成下單,零學習成本。


2️⃣ 後端 API 設計

我們建立了完整的 RESTful API:

// 訂單相關
POST   /orders           // 建立訂單
GET    /orders           // 查詢訂單列表(管理員)
GET    /orders/:id       // 查詢單筆訂單
GET    /orders/latest    // 查詢使用者最新訂單
PATCH  /orders/:id/status // 更新訂單狀態

// 認證相關
POST   /auth/admin/login // 管理員登入

// 金流相關
POST   /payment/create   // 建立付款
POST   /payment/webhook  // 接收付款回調

// 監控相關
GET    /healthz          // 健康檢查
GET    /healthz/queues   // 佇列統計

核心價值:分離責任、易於擴充、便於測試。


3️⃣ 資料架構設計

我們設計了兩個核心 Model:

User Model(使用者)

{
  lineUserId: String,    // LINE 使用者 ID
  name: String,
  phone: String,
  createdAt: Date
}

Order Model(訂單)

{
  userId: ObjectId,      // 關聯到 User
  items: [{
    productName: String,
    quantity: Number,
    price: Number
  }],
  status: String,        // Pending/In Progress/Completed/Failed
  pickup: String,        // 自取/外送/宅配
  payment: {
    tradeNo: String,
    status: String,
    amount: Number,
    paidAt: Date
  },
  createdAt: Date,
  updatedAt: Date
}

核心價值:清晰的資料結構是系統穩定的基礎。


4️⃣ 狀態管理演進

我們經歷了三個階段:

階段一:In-Memory(Day 10)

const userState = {
  [userId]: { item, price, quantity, step }
};
  • 優點:簡單快速
  • 缺點:重啟就消失、無法橫向擴充

階段二:Redis State(Day 21)

await redis.set(`user:${userId}:state`, JSON.stringify(state), { EX: 600 });
  • 優點:持久化、支援 TTL
  • 缺點:需要額外服務

階段三:Redis Queue + Worker(Day 22-24)

// Producer
await redis.rPush(QUEUE_KEY, JSON.stringify(task));

// Worker
const result = await redis.blPop(QUEUE_KEY, 5);
  • 優點:非同步處理、可擴充、可重試
  • 缺點:複雜度提升

核心價值:根據需求選擇合適的方案,不過度設計。


5️⃣ 錯誤處理與監控

我們建立了完整的容錯機制:

三層佇列系統

  • Main Queue:正常任務
  • Retry Queue:失敗任務自動重試(Exponential Backoff)
  • Dead Letter Queue:超過重試上限的任務

健康檢查

GET /healthz
{
  "status": "healthy",
  "checks": {
    "mongodb": "ok",
    "redis": "ok",
    "worker": "ok"
  }
}

錯誤通知

  • LINE 群組即時警報
  • Sentry 錯誤追蹤(選用)
  • Winston 日誌記錄

核心價值:讓系統在生產環境更穩定可靠。


實際應用場景

這個系統可以應用在:

1. 餐飲業

  • 早餐店、飲料店、便當店
  • 顧客在 LINE 點餐 → 店家收到通知 → 製作完成推播取餐
  • 支援自取/外送,整合外送平台(Foodpanda/Uber Eats API)

2. 零售業

  • 服飾店、文具店、花店
  • 顧客瀏覽商品 → 下單付款 → 宅配或自取
  • 可擴充庫存管理、會員點數

3. 服務業

  • 美容院、洗車場、補習班
  • 預約時段 → 確認服務 → 完成後評價
  • 可整合 Google Calendar

4. 批發/B2B

  • 材料行、辦公用品
  • 大量訂單 → 報價單 → 對帳結算
  • 可擴充客戶分級、信用額度管理

未來擴充方向

從 MVP 到商業化,這裡是一些可能的發展方向:

短期(1-3 個月)

1. 完善商品管理

// 目前:商品寫死在程式碼
// 未來:建立 Product Model
{
  name: String,
  price: Number,
  category: String,
  imageUrl: String,
  stock: Number,        // 庫存管理
  isAvailable: Boolean  // 上下架控制
}

2. 會員系統

  • 累積消費金額
  • 會員等級與優惠
  • 生日優惠推播
  • 消費記錄查詢

3. 優惠券與促銷

{
  code: String,         // 優惠碼
  type: String,         // 折扣/折價/免運
  value: Number,
  minAmount: Number,    // 最低消費
  validFrom: Date,
  validTo: Date
}

4. 報表與分析

  • 每日/每週/每月營收統計
  • 熱門商品排行
  • 尖峰時段分析
  • 顧客消費習慣

中期(3-6 個月)

1. 多店家支援(SaaS 化)

// 新增 Store Model
{
  storeId: String,
  storeName: String,
  lineChannelId: String,
  owner: ObjectId,
  subscription: {
    plan: String,       // Free/Basic/Premium
    expiresAt: Date
  }
}

2. 進階金流整合

  • 支援更多支付方式(LINE Pay、街口支付)
  • 定期定額訂閱
  • 分期付款
  • 退款機制

3. 物流整合

  • 超商取貨(7-11、全家)
  • 宅配業者 API(黑貓、新竹)
  • 物流追蹤推播

4. LINE 進階功能

  • Beacon 技術(到店自動提醒)
  • LINE Points 回饋
  • LINE Pay 一鍵結帳
  • 圖文選單動態更新

長期(6-12 個月)

1. AI 智能助理

// 自然語言處理
"我要兩杯大杯紅茶拿鐵,一杯半糖去冰"
↓ NLP 解析
{
  items: [{
    product: "紅茶拿鐵",
    size: "大杯",
    sugar: "半糖",
    ice: "去冰",
    quantity: 2
  }]
}

2. 智能推薦系統

  • 根據消費記錄推薦商品
  • 天氣聯動推薦(下雨推熱飲)
  • 節日自動推播(母親節蛋糕)

3. 跨平台整合

  • Facebook Messenger Bot
  • Instagram 購物功能
  • WhatsApp Business API
  • 電商平台同步(Shopee、蝦皮)

4. 區塊鏈溯源(食品安全)

  • 商品履歷上鏈
  • QR Code 掃描查詢來源
  • 增加消費者信任

技術債與改進空間

老實說,這個系統還有很多可以優化的地方:

1. 測試覆蓋率

現況:幾乎沒有自動化測試
改進

// 單元測試(Jest)
describe('Order API', () => {
  it('should create order with valid payload', async () => {
    const res = await request(app)
      .post('/orders')
      .send({ lineUserId: 'U123', items: [...] });
    expect(res.status).toBe(200);
    expect(res.body.success).toBe(true);
  });
});

// E2E 測試(Cypress)
cy.visit('/liff-form')
cy.get('#product').select('紅茶拿鐵')
cy.get('#quantity').type('2')
cy.get('button[type="submit"]').click()
cy.contains('訂單已送出')

2. 型別安全

現況:純 JavaScript,容易出錯
改進

// 使用 TypeScript
interface Order {
  userId: string;
  items: OrderItem[];
  status: OrderStatus;
  payment?: PaymentInfo;
}

type OrderStatus = 'Pending' | 'In Progress' | 'Completed' | 'Failed';

3. 安全性強化

現況:基本驗證
改進

  • Rate Limiting(防止 API 濫用)
  • CSRF Token(表單安全)
  • SQL Injection 防護(雖然用 MongoDB,但仍需防 NoSQL Injection)
  • 敏感資料加密(電話、地址)
  • 定期安全審計

4. 效能優化

現況:單機運行
改進

  • Database Indexing(加速查詢)
orderSchema.index({ userId: 1, createdAt: -1 });
orderSchema.index({ 'payment.tradeNo': 1 });
  • CDN 部署靜態資源
  • Load Balancer 分流
  • Database Sharding(資料分片)
  • Cache Warming(預熱快取)

5. 可觀測性

現況:基本 Log
改進

  • APM(Application Performance Monitoring)
    • New Relic / Datadog
  • Distributed Tracing
    • OpenTelemetry
  • 即時監控儀表板
    • Grafana + Prometheus

🎓 學習心得與建議

回顧這 30 天,有些經驗想跟大家分享:

1. 從 MVP 開始,不要想一步到位

一開始我們的訂單流程很簡單,甚至狀態管理用的是 in-memory。但這不代表它沒價值,反而是快速驗證想法的好方法。

建議

  • Week 1-2:做出能動的東西
  • Week 3:加上最基本的安全與錯誤處理
  • Week 4:擴充商業功能
  • 之後:根據真實用戶回饋調整

2. 文件化很重要

我一開始沒有認真寫 API 文件,到後面自己都搞不清楚哪個 endpoint 該傳什麼參數。

建議

  • 用 Swagger / OpenAPI 自動生成文件
  • 在 README 寫清楚環境變數設定
  • 關鍵邏輯加上註解(未來的你會感謝現在的你)

3. 不要過度設計

我曾經想「要不要一開始就做 microservices?」、「要不要用 GraphQL?」
但其實 Monolith + REST API 就夠用了,等真的遇到瓶頸再重構。

建議

  • 技術選型要符合團隊能力
  • 優先解決業務問題,而非炫技
  • 記住:「早期優化是萬惡之源」

4. 真實場景測試

用 ngrok 讓朋友或家人實際操作,你會發現很多意想不到的問題:

  • 「按鈕太小點不到」
  • 「不知道訂單送出沒」
  • 「找不到查詢訂單的地方」

建議

  • 找非技術背景的人測試
  • 觀察他們的操作流程
  • 記錄卡住的地方

5. 持續學習與迭代

技術會進步、需求會改變、LINE API 也會更新(像 LIFF 建立方式就改過)。

建議

  • 定期查看 LINE Developers 官方文件
  • 訂閱相關技術 Newsletter
  • 參與開發者社群(Facebook、Discord)
  • 把這個專案當作長期練功場

結語

30 天前,我們從一個想法開始:

「能不能讓中小企業不用架設複雜網站,就能在 LINE 上接單?」

30 天後,答案是:能!

我們不只做出了 MVP,還整合了金流、建立了後台、設計了容錯機制。更重要的是,我們證明了:

技術不應該是中小企業數位轉型的障礙,而是助力。

這個系統還不完美,但它是個起點。希望這 30 天的分享,能幫助到:

  • 想做 Side Project 的開發者
  • 思考數位轉型的店家
  • 對 LINE Bot 開發有興趣的人
  • 想了解系統設計的學生

如果你跟著做下來,恭喜你!你已經有能力:

✅ 設計並實作完整的訂單系統
✅ 串接 LINE Messaging API
✅ 建立 LIFF 表單提升 UX
✅ 整合第三方金流(綠界)
✅ 處理非同步任務與錯誤重試
✅ 建立基本的監控與日誌系統


感謝

感謝你看到這裡!

特別感謝:

  • iThome 鐵人賽提供的舞台
  • LINE Developers 社群的技術支援
  • 所有留言給建議的讀者
  • 家人朋友的支持與測試協助

另外,今天剛好參加了 2025 Hello World Dev Conference,真的感謝 iThome 舉辦的這麼好,光是體驗完第一天就獲益良多!


聯絡方式

如果你有任何問題、建議,或想討論合作:

也歡迎分享你的實作成果,我很期待看到這個系統被應用在真實場景!


完賽感言

回顧這 30 天,真的是充實又有挑戰。從一開始的專案規劃、中間的技術踩坑、到最後的系統整合,每一步都是學習。

最大的收穫不只是技術本身,而是:

如何把一個模糊的想法,變成可運作的系統。

這個過程中,我學會了:

  • 分析問題的本質(中小企業真正需要什麼)
  • 選擇合適的技術(不過度設計)
  • 設計清晰的架構(易於擴充)
  • 處理真實場景的挑戰(錯誤、重試、監控)

如果你也想做 Side Project,我的建議是:

Just Start.

不用等「最佳時機」,不用等「完美計畫」。
先做出能動的東西,然後一步步改進。

30 天很短,但足夠證明你的決心。
30 天也很長,長到可以完成一個有意義的專案。


參考資源彙整

這裡整理了這 30 天用到的所有官方文件與工具:

LINE 官方

金流整合

後端技術

工具


最後的最後

如果用一句話總結這 30 天:

「從 Hello World 到能收單、能付款、能通知的完整系統」

這不只是技術的學習,更是產品思維的訓練。

希望這個系列能幫助你:

  • 理解如何設計一個完整系統
  • 學會 LINE Bot 開發的各種技巧
  • 建立解決真實問題的能力

完賽!

30 天,我們做到了!

Day 30 完
2025 iThome 鐵人賽完賽 🎉


上一篇
讓系統永不漏通知:錯誤回報、重試機制與監控設計全攻略
系列文
用 LINE OA 打造中小企業訂單系統:從零開始的 30 天實作紀錄30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言